<template>
	<view class="container" :style="[ctop()]">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-between a-center">
				<view class="flex a-center rule" @tap="back()">
					<u-icon name="arrow-left" size="40"></u-icon>
				</view>
				<view class="title ecllipse flex j-center">
					<view>消息中心</view>
				</view>
				<view class="flex j-end a-center place rule">
					<view>全部已读</view>
				</view>
			</view>
		</view>
		<view class="abso banner"></view>
		<view class="rela" style="margin-top: 32rpx;">
			<view class="block flex j-center a-center">
				<view class="flex j-between a-center types">
					<view class="item flex col j-center a-center">
						<view class="icon rela">
							<u-badge type="error" count="7" :offset="[10,10]"></u-badge>
							<image class="image" src="../static/icon/msg/m1.png"></image>
						</view>
						<view class="msg">系统消息</view>
					</view>
					<view class="item flex col j-center a-center">
						<view class="icon">
							<image class="image" src="../static/icon/msg/m(2).png"></image>
						</view>
						<view class="msg">任务消息</view>
					</view>
					<view class="item flex col j-center a-center">
						<view class="icon">
							<image class="image" src="../static/icon/msg/m(3).png"></image>
						</view>
						<view class="msg">接单消息</view>
					</view>
				</view>
			</view>
			<view class="block list" v-for="(item,i) in list" :key="i">
				<view class="flex j-between a-center">
					<view class="flex a-center">
						<view class="t-icon rela">
							<u-badge v-if="item.isread" :is-dot="true" size="mini" type="error" :offset="[0,0]"></u-badge>
							<image v-if="item.type == 1" class="image" src="../static/icon/msg/m(1).png"></image>
							<image v-if="item.type == 2" class="image" src="../static/icon/msg/m(4).png"></image>
							<image v-if="item.type == 3" class="image" src="../static/icon/msg/m(5).png"></image>
						</view>
						<view class="t-name">{{item.name}}</view>
					</view>
					<view class="time">{{item.time}}</view>
				</view>
				<view class="ctt">{{item.msg}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			list:[
				{isread:true,name:'提现通知',msg:'您申请的提现申请已经处理成功，请前往支付宝查看 ',time:'2021-11-11 12:00:00',type:1},
				{isread:false,name:'审核提示',msg:'您好，您发布的任务还有3条待审核，请审核',time:'2021-11-11 12:00:00',type:2},
				{isread:false,name:'金币到账',msg:'您提交的任务已通过审核，金币已到账，请前往钱包查看',time:'2021-11-11 12:00:00',type:3}
			]
		}
	},
	methods:{
		top(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+10)+'px'}
		},
		ctop(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+44)+'px'}
		},
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{padding: 18rpx 24rpx;width: 100%;left:0;right: 0;top:0;z-index: 10;color: #fff;
	background: linear-gradient(270deg, #428BF7 0%, #246FDD 100%);
	.title{font-weight: bold;font-size: 36rpx;width: 400rpx;}
	.rule{font-size: 32rpx;width: 32%;}
	.msg{width: 44rpx;height: 44rpx;margin-right: 16rpx;}
}
.banner{height: 320rpx;left: 0;top:0;right: 0;
	background: linear-gradient(270deg, #428BF7 0%, #246FDD 100%);
}
.block{background-color: #FFF;border-radius: 16rpx;padding: 32rpx 24rpx;color: #333;
	.types{font-size: 28rpx;width: 578rpx;margin: 10rpx auto 16rpx;
		.icon{width:124rpx;height: 124rpx;}
	}
	.t-icon{width: 48rpx;height: 48rpx;}
	.t-name{font-size: 32rpx;font-weight: bold;margin-left: 24rpx;}
	.time{font-size: 24rpx;color:#999;}
	.ctt{font-size: 28rpx;margin-top: 32rpx;}
}
.list{margin-top: 24rpx;}
</style>
